<h1>Create a task</h1>

<app-task-create-view #flo></app-task-create-view>

<button class="btn btn-secondary" type="button" (click)="back()">Cancel</button>
<button class="btn btn-primary" type="button" (click)="createTask()">Create task</button>

<clr-modal
  [(clrModalOpen)]="isOpen"
  *ngIf="isOpen"
  [clrModalClosable]="!isCreating"
  [clrModalSize]="isCreating ? 'md' : 'lg'"
>
  <h3 class="modal-title">Create task</h3>
  <div *ngIf="isCreating" class="modal-body">
    <div><clr-spinner clrInline clrSmall></clr-spinner>&nbsp; Creating task...</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" [disabled]="true">Cancel</button>
      <button type="submit" class="btn btn-primary" [disabled]="true">Create the task</button>
    </div>
  </div>

  <div class="modal-body" *ngIf="!isCreating">
    <form clrForm clrLayout="horizontal" (submit)="submit()" [formGroup]="form" clrLabelSize="4">
      <div *ngIf="errors && errors.length > 0" class="alert alert-error">
        <div *ngFor="let error of errors">• {{ error }}</div>
      </div>
      <div style="margin-bottom: 0.8rem">This action will create the following <strong>task</strong>:</div>
      <div class="alert alert-danger" *ngIf="form.hasError('uniqueStreamNames')">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <div class="alert-text">Duplicate task name, please check input names.</div>
          </div>
        </div>
      </div>
      <div class="clr-form-control clr-row" style="margin-top: 0; max-height: 16px">
        <label class="clr-control-label clr-col-12 clr-col-md-2">Definition</label>
        <div class="clr-control-container form-control input-sm clr-col-md-10 clr-col-12">
          <span class="dsl-text dsl-truncate">{{ dsl }}</span>
        </div>
      </div>

      <div class="form-group clr-form-control clr-row">
        <label class="clr-control-label clr-col-12 clr-col-md-2">Name</label>
        <div class="clr-control-container clr-error clr-col-md-10 clr-col-12" [class]="{'clr-error': taskName.errors}">
          <div class="clr-input-wrapper">
            <input
              type="text"
              placeholder="Task Name"
              maxlength="255"
              name="name"
              [formControl]="taskName"
              [dataflowFocus]="true"
              style="width: 360px"
              class="clr-input"
            />
          </div>
          <div class="clr-subtext" *ngIf="!taskName?.errors">
            The task definition name should be less than 63 characters for Kubernetes or Cloud Foundry platforms.
          </div>
          <div class="clr-subtext" *ngIf="taskName?.errors && taskName.errors?.required">Task name is required!</div>
          <div class="clr-subtext" *ngIf="taskName?.errors && taskName?.errors?.uniqueResource">
            Task name is already taken!
          </div>
          <div class="clr-subtext" *ngIf="taskName?.errors && taskName?.errors?.pattern">Task task name!</div>
          <div class="clr-subtext" *ngIf="taskName?.errors && taskName?.errors?.maxlength">
            Task name must be less than 256 characters long!
          </div>
        </div>
      </div>

      <clr-control-container class="form-group">
        <label for="desc">Description</label>
        <input
          id="desc"
          name="desc"
          [formControl]="taskDescription"
          clrControl
          placeholder="Task Description"
          maxlength="255"
          style="width: 560px"
        />
        <clr-control-error *clrIfError="'maxlength'"
          >Task description must be less than 255 characters long!
        </clr-control-error>
      </clr-control-container>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="close()" [disabled]="isCreating">Cancel</button>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Create the task</button>
      </div>
    </form>
  </div>
</clr-modal>
